<template>
  <button :class="buttonClass" :disabled="disabled" @click="handleClick">
    <slot></slot>
  </button>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  type: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'success', 'warning', 'danger', 'info', 'default'].includes(value)
  },
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['small', 'medium', 'large'].includes(value)
  },
  disabled: {
    type: Boolean,
    default: false
  },
  round: {
    type: Boolean,
    default: false
  },
  plain: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['click'])

const buttonClass = computed(() => {
  return [
    'nb-button',
    `nb-button--${props.type}`,
    `nb-button--${props.size}`,
    {
      'is-disabled': props.disabled,
      'is-round': props.round,
      'is-plain': props.plain
    }
  ]
})

const handleClick = (event) => {
  if (!props.disabled) {
    emit('click', event)
  }
}
</script>

<style scoped>
.nb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  outline: none;
  user-select: none;
}

/* 尺寸 */
.nb-button--small {
  padding: 5px 12px;
  font-size: 12px;
}

.nb-button--medium {
  padding: 8px 16px;
  font-size: 14px;
}

.nb-button--large {
  padding: 12px 24px;
  font-size: 16px;
}

/* 类型 - 默认样式 */
.nb-button--primary {
  background-color: #409eff;
  border-color: #409eff;
  color: #ffffff;
}

.nb-button--primary:hover:not(.is-disabled) {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.nb-button--primary:active:not(.is-disabled) {
  background-color: #3a8ee6;
  border-color: #3a8ee6;
}

.nb-button--success {
  background-color: #67c23a;
  border-color: #67c23a;
  color: #ffffff;
}

.nb-button--success:hover:not(.is-disabled) {
  background-color: #85ce61;
  border-color: #85ce61;
}

.nb-button--success:active:not(.is-disabled) {
  background-color: #5daf34;
  border-color: #5daf34;
}

.nb-button--warning {
  background-color: #e6a23c;
  border-color: #e6a23c;
  color: #ffffff;
}

.nb-button--warning:hover:not(.is-disabled) {
  background-color: #ebb563;
  border-color: #ebb563;
}

.nb-button--warning:active:not(.is-disabled) {
  background-color: #cf9236;
  border-color: #cf9236;
}

.nb-button--danger {
  background-color: #f56c6c;
  border-color: #f56c6c;
  color: #ffffff;
}

.nb-button--danger:hover:not(.is-disabled) {
  background-color: #f78989;
  border-color: #f78989;
}

.nb-button--danger:active:not(.is-disabled) {
  background-color: #dd6161;
  border-color: #dd6161;
}

.nb-button--info {
  background-color: #909399;
  border-color: #909399;
  color: #ffffff;
}

.nb-button--info:hover:not(.is-disabled) {
  background-color: #a6a9ad;
  border-color: #a6a9ad;
}

.nb-button--info:active:not(.is-disabled) {
  background-color: #82848a;
  border-color: #82848a;
}

.nb-button--default {
  background-color: #ffffff;
  border-color: #dcdfe6;
  color: #606266;
}

.nb-button--default:hover:not(.is-disabled) {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.nb-button--default:active:not(.is-disabled) {
  color: #3a8ee6;
  border-color: #3a8ee6;
}

/* 朴素按钮 */
.nb-button.is-plain {
  background-color: transparent;
}

.nb-button--primary.is-plain {
  color: #409eff;
  border-color: #b3d8ff;
  background-color: #ecf5ff;
}

.nb-button--primary.is-plain:hover:not(.is-disabled) {
  color: #ffffff;
  background-color: #409eff;
  border-color: #409eff;
}

.nb-button--success.is-plain {
  color: #67c23a;
  border-color: #c2e7b0;
  background-color: #f0f9eb;
}

.nb-button--success.is-plain:hover:not(.is-disabled) {
  color: #ffffff;
  background-color: #67c23a;
  border-color: #67c23a;
}

.nb-button--warning.is-plain {
  color: #e6a23c;
  border-color: #f5dab1;
  background-color: #fdf6ec;
}

.nb-button--warning.is-plain:hover:not(.is-disabled) {
  color: #ffffff;
  background-color: #e6a23c;
  border-color: #e6a23c;
}

.nb-button--danger.is-plain {
  color: #f56c6c;
  border-color: #fbc4c4;
  background-color: #fef0f0;
}

.nb-button--danger.is-plain:hover:not(.is-disabled) {
  color: #ffffff;
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.nb-button--info.is-plain {
  color: #909399;
  border-color: #d3d4d6;
  background-color: #f4f4f5;
}

.nb-button--info.is-plain:hover:not(.is-disabled) {
  color: #ffffff;
  background-color: #909399;
  border-color: #909399;
}

/* 圆角按钮 */
.nb-button.is-round {
  border-radius: 20px;
}

/* 禁用状态 */
.nb-button.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
</style>

